<script setup>
import {constantStore} from "@/stores/constantStore.js";
import {onMounted, ref} from "vue";
import {getProjectList} from "@/api/httpApi/projectApi.js";
import {successCode} from "@/api/httpApi/base/http.js";
import MyTable from "@/components/constant/myTable.vue";
import {addMap, delMap, getMapList, updateMap} from "@/api/httpApi/mapApi.js";

/**
 * 初始化
 */
onMounted(() => {
  init();
})

let projectList = ref([]);
let projectSelectItem = ref([]);

//初始化分类列表
function init() {
  getProjectList().then(res => {
    if (res.code === successCode) {
      projectList.value = res.data;
      for (let i = 0; i < projectList.value.length; i++) {
        let item = projectList.value[i];
        projectSelectItem.value.push(
            {
              label: item.name,
              value: item.id
            })
      }
    }
  })
}

let mapMapping = [
  {
    label: "ID",
    prop: "id",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "地图名称",//表头名称 必填
    prop: "name",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "name",// 编辑框的数据字段名称  非必填 不写默认用prop
      labelWidth: "100",
      required: true,//是否必传，默认false
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      rules: []//构建默认的校验规则
    }
  },
  {
    label: "地图图片",
    prop: "image",
    propConfig: {
      align: "center",
      width: "200",
      type: "image",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "image", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      imageConfig: {
        shape: "square", // square circle
        radius: 0,
        size: "",//单位PX 有size配置，  width 和height 将会失效 且 shape等于circle，仅仅会生效此属性
        width: 460,//单位PX
        height: 215,//单位PX
        fit: "cover", //图片如何适应到容器框，同原生 object-fit。  'fill', 'contain', 'cover', 'none', 'scale-down',
        lazy: true,
        alt: "地图图片",
      },
      cropperConfig: {
        canScale: true,//图片是否允许滚轮缩放 默认true
        autoCrop: true,//是否默认生成截图框 默认false
        fixed: false,//是否开启截图框宽高固定比例 默认false
        fixedNumber: [1, 1],//截图框的宽高比例, 开启fixed生效 默认[1, 1]  ([ 宽度 , 高度 ])
        full: false,//是否输出原图比例的截图, 默认false
        canMove: true,//上传图片是否可以移动, 默认true
        canMoveBox: false,//截图框能否拖动, 默认true
        original: false,//上传图片按照原始比例渲染, 默认false
        centerBox: false,//截图框是否被限制在图片里面 默认false
        high: true,//是否按照设备的dpr输出等比例图片 默认true
        infoTrue: false,//true 为展示真实输出图片宽高 默认false 展示看到的截图框宽高
        fixedBox: true,//固定截图框大小, 不允许改变 默认false false
      },
    }
  },
  {
    label: "顺序",
    prop: "orderIndex",
    propConfig: {
      align: "center",
      width: "100",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "number"
    }
  },
  {
    label: "域 名",
    prop: "ip",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
    }
  },
  {
    label: "Rcon端口",
    prop: "rconPort",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "number"
    }
  },
  {
    label: "服务器端口",
    prop: "serverPort",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "number"
    }
  },
  {
    label: "密 码",
    prop: "password",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
    }
  },
  {
    label: "描 述",
    prop: "description",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text"
    }
  },
  {
    label: "商城",//表头名称 必填
    prop: "projectName",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "projectId",// 编辑框的数据字段名称  非必填 不写默认用prop
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      required: true,//是否必传，默认false
      option: projectSelectItem.value //选择框内数据
    }
  },
  {
    label: "地图类型",
    prop: "mapType",
    propConfig: {
      align: "center",
      width: "90",
      type: "tag",
      stateMapping: [
        {type: "success", data: 0, msg: "PVE",},
        {type: "delete", data: 1, msg: "PVP",}
      ]
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      option: [
        {
          label: "PVE",
          value: 0
        },
        {
          label: "PVP",
          value: 1
        }
      ],//选择框选项
    },
  },
  {
    label: "发货类型",
    prop: "sendType",
    propConfig: {
      align: "center",
      width: "90",
      type: "tag",
      stateMapping: [
        {type: "success", data: 1, msg: "SteamId",},
        {type: "delete", data: 2, msg: "游戏ID",}
      ]
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      option: [
        {
          label: "SteamId",
          value: 1
        },
        {
          label: "游戏ID",
          value: 2
        }
      ],//选择框选项
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "最近修改时间",
    prop: "updateTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "备 注",
    prop: "remarks",
    propConfig: {
      align: "center",
      width: "400",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      require: true,
      labelWidth: "100"
    },
  },
]


</script>

<template>
  <div id="map">
    <my-table :initAction="() => { return getMapList()}"
              :addAction="(map) => { return addMap(map)}"
              :updateAction="(map) => { return updateMap(map)}"
              :delAction="(ids) => { return delMap(ids)}"
              title="方舟地图"
              :mapping="mapMapping"/>
  </div>
</template>

<style scoped lang="scss">

</style>
